<template>
  <div class="loveslist">
    <div class="backs"><span @click="backto">返回首页</span></div>
<!--    <GetBack titles="选择频道" />-->
    <div class="dislikes">
      <h4>我的频道：
        <span :class="{blues:isdisplay}" @click="isdisplay=!isdisplay">
          <small v-show="!isdisplay">编辑</small>
          <small @click="newsLoveList" v-show="isdisplay">保存/返回</small>
        </span>
      </h4>
      <div></div>
      <ul>
        <li v-for="(item,index) in fixedList" :key="index">{{ item }}</li>
      </ul>
      <ul>
        <li v-show="index>4" v-for="(item,index) in recommendList" :key="index">
          {{ item }}
          <van-icon v-show="index>4" :class="{displayShow:!isdisplay}" @click="filtrates(item)" name="cross"/>
        </li>
      </ul>
    </div>
    <div class="likes">
      <h4>频道推荐：
      </h4>
      <ul>
        <li v-for="(item,index) in loveList" :key="index">
          {{ item }}
          <van-icon @click="removelist(item)" name="plus"/>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>


export default {
  name: "LoveNewsList",
  props: {
    classificationTitle: Array,
  },
  data() {
    return {
      isdisplay: false,
      recommendList: [],//推荐列表
      fixedList: ["头条", "新闻", "国际", "国内", "政治"],
      loveList: [],//喜爱列表
    }
  },
  created() {
  },
  methods: {
    //添加栏目
    filtrates(i) {
      this.loveList.push(i)
      localStorage.setItem("love", JSON.stringify(this.loveList))
      this.recommendList = this.recommendList.filter(e => e != i)
      localStorage.setItem("recommend", JSON.stringify(this.recommendList))
    },
    // 删除栏目
    removelist(e) {
      this.recommendList.push(e)
      localStorage.setItem("recommend", JSON.stringify(this.recommendList))
      this.loveList = this.loveList.filter(item => item != e)
      localStorage.setItem("love", JSON.stringify(this.loveList))
      this.isdisplay = true
    },
    newsLoveList() {
      this.$emit("newlists", [this.loveList, false])
    },
    backto() {
      this.$emit("backto", false)
    }
  },
  watch: {
    //判断初始显示
    classificationTitle(e) {
      // console.log(e)
      if (JSON.parse(localStorage.getItem("love"))) {
        this.loveList = JSON.parse(localStorage.getItem("love"))
        this.recommendList = JSON.parse(localStorage.getItem("recommend"))
      } else {
        e.forEach(e => {
          this.recommendList.push(e.name)
        })
        // console.log(this.recommendList)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.loveslist {
  height: 600px;
  padding: 5px;


  .backs {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;

    span {
      background-color: beige;
      padding: 5px;
      border-radius: 6px;
    }
  }

  .likes, .dislikes {
    h4 {
      margin: 10px 0 0 0;
      height: 30px;

      .blues {
        background-color: #f1f17e;
        color: white;
      }

      span {
        padding: 5px;
        font-size: 10px;
        float: right;
        background-color: beige;
        border-radius: 10px;
      }
    }

    ul {
      width: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 10px;

      li {
        width: 28%;
        font-size: 14px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        vertical-align: center;
        background-color: beige;
        margin: 5px 0;

        .displayShow {
          visibility: hidden;
          //display: none;
        }
      }
    }
  }
}


</style>